<!--
签到签退--在签到范围
-->
<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <div id="DutyPersonPositionBaiduMap" style="width: 100%;min-height: 700px;height: 100%;">暂无位置信息</div>
    </el-row>
</template>
<script>
import BMap from 'BMap'

export default {
    name:'DutyPersonPosition',
    props: {
        pisionInfo: {
            type: Object,
            required: false
        },
    },
    data() {
        return {
        }
    },
    created() {
       
    },
    mounted(){
        let infoObj = this.pisionInfo
        let centerLc =infoObj.mapLocation || (this.$store.state.userinfo.org.mapLocation?JSON.parse(this.$store.state.userinfo.org.mapLocation):'')//"{"lon":"117.201048","lat":"31.826473","zoom":12}"
        if(!centerLc)
            return;
        let map = new BMap.Map('DutyPersonPositionBaiduMap')
        var point = new BMap.Point(centerLc.lon,centerLc.lat)//联网单位
        
        let radius =infoObj.signOrgRadius  //画圈的范围 TODO
        let pointCircle = new BMap.Circle(point,radius,{strokeColor:"#F9BF26",fillColor:"#F9BF26", strokeWeight: 0.2 ,fillOpacity: 0.2, strokeOpacity: 0.2}); //创建圆
        var markerOrg = new BMap.Circle(point,0,{strokeColor:"#F9BF26", strokeWeight:2}); //创建圆心点位置
        // var marker = new BMap.Marker(point);  // 创建标注
        map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
        map.enableScrollWheelZoom(true) //滚轮事件
        // map.addOverlay(marker); 
        map.addOverlay(markerOrg); 
        map.addOverlay(pointCircle);  
        $.each(infoObj.onDutyPerson,(index,obj)=>{
            let dutyPoint = new BMap.Point(obj.longitude,obj.latitude);
             //创建用户头像标注
            let myIcon = new BMap.Icon('resource/rdspFile_1552981560146.png',
                 new BMap.Size(0, 0), // 视窗大小
            {
                //anchor: new BMap.Size(26, 32),
                //imageSize: new BMap.Size(26, 32), // 引用图片实际大小
　　　　　　　　　//imageOffset:new BMap.Size(-13,-16)  // 图片相对视窗的偏移
            });
            // 创建文本标注对象
				let label = new BMap.Label("<div class='DutyPersonPosition_unit-orgName'>"+(infoObj.signOrgName)+"</div>",{
					offset:new BMap.Size(-30, -70),
					position:point,
				}); 
				// 自定义文本标注样式
				label.setStyle({
					color: '#000',
					padding: '10px',
					fontSize: '16px',
					height: '30px',
					lineHeight: '30px',
					fontFamily: '微软雅黑',
					border:"none",
					backgroundColor:"none",
				});
				map.addOverlay(label);
				var myIconMarker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
				let markerLabelScore = new BMap.Label("<div class='DutyPersonPosition_baiduMark-duty DutyPersonPosition_baiduMark-dutys'>"+(infoObj.signUserName)+"</div>",{
					offset:new BMap.Size(-10, -50),
					position:point,
				});   
				markerLabelScore.setStyle({
					width: 'auto',
					height:'45px',
					color: '#fff',
					fontSize: '16px',
					backgroundColor: 'none',
					border: 'none',
					borderRadius:"4px",
					textAlign: "left",
					padding: "0px",
				});
				markerLabelScore.setZIndex(10000);
				map.addOverlay(markerLabelScore);   
        })
        //map.panTo(point);            // 将标注添加到地图中
    },
    methods: {
        
    }
}
</script>
<style type="text/css" lang="scss">
.DutyPersonPosition_baiduMark-duty{
    color:#000;
    font-size: 15px;
    font-weight: bold;
}
.DutyPersonPosition_unit-orgName{
    background-color: #F9B80E;
    border: none;
    padding: 2px 10px;
    position: relative;
    border-radius: 4px;
    font-weight: bold;
}

.DutyPersonPosition_unit-orgName:after{
	content: '';
	width: 0;
	height: 0;
	border: 10px solid;
	position: absolute;
	bottom: 0;
	left: 11px;
	transform: translateY(20px);
	border-color:  #F9B80E transparent transparent;
}
.DutyPersonPosition_baiduMark-dutys{
	opacity: 0.8;
	padding: 0px 0px 0px 0px;
    display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	background-color: #47CFAD;
	border-radius: 4px;
	padding: 6px 10px 4px 10px;
	font-weight: normal;
}
.DutyPersonPosition_baiduMark-dutys:after{
	content: '';
	width: 0;
	height: 0;
	border: 10px solid;
	position: absolute;
	/* left: 14.5px; */
	bottom: -2px;
	border-color:  #47CFAD transparent transparent;
}
</style>